import { ref, unref, nextTick, watch } from 'vue'
import { GAME_STATUS_CODE } from '@/enum'
import { findTrendChart } from '@/api'
import { useGameStore } from '@/stores/game'
export const useNormal = (props, tab, table, types) => {

    const reds = ['大', '单', '家']
    
    const blues = ['小', '双', '野']

    const list = ref([])


    const gameStore = useGameStore()

    const getList = async () => {
        
        const params = types === 'simple' ? {
            lotteryCode: props.gameType,
            type: props.type,
            index: props.index,
        } : {
            lotteryCode: props.gameType,
            type: unref(tab),
        }
        try {
            const { data } = await findTrendChart(params)
            list.value = []
            list.value = data.data

            nextTick(() => {
                const target = unref(table)
                target.scrollTo(target.scrollWidth, 0)
            })
        } catch {
            /* empty */
        }
    }

    const getTxt = (parent: number, child: number) => {
        const _list = unref(list)
        return _list?.[parent]?.value?.[child] ?? ''
    }

    const getCss = (parent, child) => {
        const _list = unref(list)
        const txt = _list?.[parent]?.value?.[child] ?? ''

        if (reds.includes(txt)) return 'red'
        if (blues.includes(txt)) return 'blue'
        return ''
    }

    const getCols = () => {
        let col = unref(list).length
        col = col < 19 ? 19 : col
        return col
    }

    watch(
        () => gameStore.drawingStatus,
        (n) => {
            if (!n) return
            if (n.code === GAME_STATUS_CODE.kaijiang.code) {
                setTimeout(() => {
                    getList()
                }, 1000);
            }
        },
    )

    return {
        list,
        options: props.options,
        getCols,
        getCss,
        getTxt,
        getList
    }

}
